source map
変換後のJSファイルに所定の形式のコメントを書くことでひもづけられる
format
ファイル形式
jsonで記述されているようだ
sourcemap: <url>
2. ソースファイル中に//# sourceMappingURL=<url>のような形で指定する
@も可なのは後方互換性のため
https://tc39.es/source-map/#extraction-methods-for-javascript-sources
/* */styleのcommentでのみ使用できる
wasmにも使えるらしい
両方指定されている場合は、HTTP headerを優先する
<url>にはdata URLも指定可能
2021-06-28 13:46:39 使ってみたが、微妙
bundle minifyによって省略された変数が多く、それらは全てundefinedという値しかもたない
わかるのは、処理の流れくらいだろうか？
2024-07-28 10:46:39 元の変数名がわかることで、処理を置いやすくなるのが利点の一つtakker.icon
2024-07-28 16:36:11 単体テストしたら無限ループに入ってしまった
https://code2svg.vercel.app/svg/L103-145/https://raw.githubusercontent.com/evanw/source-map-visualization/f3e9dfec20e7bfd9625d03dd0d427affa74a9c43/code.js#.svg https://github.com/evanw/source-map-visualization/blob/f3e9dfec20e7bfd9625d03dd0d427affa74a9c43/code.js#L103-L145
code:extractSourceMapURL.ts
import { createErr, createOk, Result } from "../option-t/mod.ts";
export interface InvalidURLError {
name: "InvalidURLError";
message: string;
}
export interface NotFoundError {
name: "NotFoundError";
message: string;
}
/**
* Extracts the source map URL from the given code.
*
*
* @param code - The code from which to extract the source map URL.
* @param _lang - The language of the code (currently only supports "js").
* @returns The extracted source map URL as a URL object, or null if no source map URL is found.
*/
export const extractSourceMapURL = (
code: string,
base: string | URL | undefined,
): Result<URL, InvalidURLError | NotFoundError> => {
let url;
// Check for both "//" and "/*" comments. This is mostly done manually
// instead of doing it all with a regular expression because Firefox's
// regular expression engine crashes with an internal error when the
// match is too big.
for (const match of code.matchAll(/\/(*/)#@ *sourceMappingURL=/g)) { const start = match.index + match0.length; const n = code.length;
let end = start;
while (end < n && code.charCodeAt(end) > 32) {
end++;
}
if (end === start) continue;
if (match1 === "/" || code.indexOf("*/", end) > 0) { url = code.slice(start, end);
break;
}
}
return url
? URL.canParse(url, base)
? createOk(new URL(url, base))
: createErr({ name: "InvalidURLError", message: Invalid URL: ${url} })
: notFoundError;
};
const notFoundError = createErr<NotFoundError>({
name: "NotFoundError",
message: "Source map URL is not found",
});
libraries
色々まとまっている
sourceMappingURLをソースコードから抽出するpackage
Source Map Visualizer
矢印で結ばれるUIがかっこいい
対応関係がわかりやすい
https://gyazo.com/26df3cbc56b10991412724f036d7b9d8
Reference